<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>投放公司</span>
    </div>
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>

    <v-tableBtns
      :show-export="false"
      :show-create="true"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :deletable="false"
      :editable="false"
      :readable="true"
      width="60px"
      btn-class="btn"
      @sortChange="sortChange"
      @read="read"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

    <!--添加公司-->
    <el-dialog
      :visible.sync="dialogVisible"
      title="添加投放公司"
      width="30%"
      center>
      <el-form label-width="80px" size="mini">
        <el-form-item label="公司名">
          <el-input
            v-model="companyName"
          />
        </el-form-item>
      </el-form>
      <p class="tips">
        <i class="el-icon el-icon-info"></i>
        投放公司的相关统计资料来源于每日明细导入，请及时上传数据。
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Home',
    data() {
      return {
        uploadUrl: process.env.BASE_API + 'action/TaoLaunchCorpInfo/saveFile',
        companyName: '',
        dialogVisible: false,
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        // 排序
        sidx: '',
        sortKey: null,
        formTitle: [
          {
            cn: '公司: ',
            en: 'launch_corp_name'
          }
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: '投放公司',
            en: 'corp_name',
            sortable: true
          },
          {
            cn: '总充值',
            en: 'total_recharge',
            sortable: true
          },
          {
            cn: '总消耗',
            en: 'total_cost',
            sortable: true
          },
          {
            cn: '余额',
            en: 'total_balance',
            sortable: true
          },
        ],
        tableData: [],
        exportTitle: [],
        exportData: []

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.startDate = origin[key][0]
            data.endDate = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList(data) {
        const loading = this.$loading()
        let datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey
        }
        this.$get('action/TaoLaunchCorpInfo/dataGrid', datas)
          .then(res => {
            let list = []
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.recovery_rate = (item.recovery_rate ? (item.recovery_rate * 100).toFixed(2) : 0) + '%'
                item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
                item.act_rate = (item.act_rate ? (item.act_rate * 100).toFixed(2) : 0) + '%'
                return item
              })
            }
            this.pageInfo.totalPage = res.data.totalPage
            this.pageInfo.totalRow = res.data.totalRow
            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: err.msg || '获取数据失败',
              type: 'error'
            })
          })
      },

      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },

      reset() {
        this.filter_info = {}
        this.getTableList()
      },

      addNew() {
        this.dialogVisible = true
        this.isEdit = false
      },
      read(val) {
        this.$router.push({
          name: 'taobao.launch_company.edit',
          query: {
            id: val.row.id
          },
          params: {
            details: val.row
          }
        })
      },

      submit() {
        const data = {
          corp_name: this.companyName
        }
        this.$post('action/TaoLaunchCorpInfo/save', data)
          .then(res => {
            this.dialogVisible = false
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },

      // 排序
      sortChange({ column, prop, order }) {
        console.log(column, prop, order)
        this.sidx = prop || ''
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    }
  }
</script>

<style scoped>
  .tips {
    text-align: center;
  }
</style>
